

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

    const arr =  [
            { 'id': '29', 'pid': '',     'name': '总裁办' },
            { 'id': '2c', 'pid': '',     'name': '财务部' },
            { 'id': '2d', 'pid': '2c', 'name': '财务核算部'},
            { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'},
            { 'id': 'd2', 'pid': '',     'name': '技术部'},
            { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部'},
            { 'id': '2g', 'pid': 'd2', 'name': 'Python研发部'},
            ]


            // 1.遍历数组中所有的部门对象,给每一个部门对象添加一个children属性,值为空数组
            const mapObj = {} // 映射对象,方便根据数据的关系找数据

            arr.forEach(item => {
              if(!item.children) {
                item.children = []
              }
              // 往映射对象添加数据: 取出每一个item对象的id作为映射对象的key, 值就是当前的item对象
              mapObj[item.id] = item
            })
            console.log(mapObj,'mapObj');

             // 3.具体实现树形数据的转化
            const newArr = []  // 保存树形的数据

            arr.forEach(item => {
              // 根据数据的父子级关系,找到父级的数据
              const parent = mapObj[item.pid]
              // parent 如果是undefined,就说明item没有父级是一级的数据
              // parent 如果有值,就说明item是一个二级数据或三级数据,parent保存的是父级对象
              if(parent) {
                parent.children.push(item)
              } else {
              // parent 如果是undefined,就说明item没有父级是一级的数据
                newArr.push(item)
              }
            })
            console.log(newArr);
    </script>
</head>
<body>
    
</body>
</html>